<ion-header>
  <ion-toolbar color="primary">
    <ion-back-button color="light" slot="start" text="返回" defaultHref="/tabs/home"></ion-back-button>
    <ion-title>商品详情</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>

  <ion-card class="head-div">
    <img [src]="detaildata.img" class="div-img">
  </ion-card>

  <ion-grid class="thing">
    <ion-row>
      <ion-col class="name" size="7">{{detaildata.name}}</ion-col>
      <ion-col class="stars" size="5">推荐指数：{{detaildata.stars}}颗星</ion-col>
    </ion-row>
    <ion-row>
      <ion-col class="price" size="6">参考价格：¥{{detaildata.price}}</ion-col>
      <ion-col class="score" size="3">评分：{{detaildata.score}}</ion-col>
      <ion-col class="comments" size="3"><u>全部评论</u></ion-col>
    </ion-row>
    <ion-row>
      <ion-col class="select-comments">精选评论</ion-col>
    </ion-row>
  </ion-grid>

  <ion-list class="detail-list">
    <ion-item class="detail-tabs-item" lines="none" *ngFor="let item of detaildata.comments">
      <ion-thumbnail class="detail-thumbnail" slot="start">
        <img class="detail-img" [src]="item.icon">
      </ion-thumbnail>
      <div class="detail-1">
        <ion-row class="row-1">
          <ion-col size="6">{{item.name}}</ion-col>
          <ion-col size="6" class="time">{{item.time}}</ion-col>
        </ion-row>
        <ion-row class="row-2">
          <ion-col class="row-2-col">{{item.content}}</ion-col>
        </ion-row>
      </div>

    </ion-item>
  </ion-list>

  <ion-grid>
    <ion-row>
      <ion-col size="6" class="addcart">
        <ion-button expand="block" color="primary" href="/tabs/cart">加入购物车</ion-button>
      </ion-col>
      <ion-col size="6" class="buynow">
        <ion-button expand="block" color="success">立即购买</ion-button>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>